<template>
    <div class="history">
        <div class="chart" ref="chart">

        </div>

        <a-button class="bt" @click="Canrefresh = true" type="primary" v-show="Canrefresh == false">继续刷新</a-button>
    </div>
</template>
<script>
export default {
    mounted() {
        this.$ipcRenderer.on_C2H4DataResultsHistory_reply(
            (RamanDataResultsHistory) => {
                this.$nextTick().then((data) => {
                    let Data = RamanDataResultsHistory.map((item) => {
                        // console.log(this.transTimestamp(item["time"]));
                        return {
                            ...item,
                            // time: this.transTimestamp(item["time"], "-"),
                        };
                    });
                    this.drawChart(Data);
                });
            }
        );

    },
    data() {
        return {
            visible: false,
            title: "",
            myChart: null,
            Canrefresh: true
        };
    },
    methods: {

        getData() {
            if (this.Canrefresh == false) return;
            console.log(9999)
            this.$ipcRenderer.send("getC2H4Results", "history"); //拉取拉曼测试结果
        },

        drawChart(Data) {
            let option = {
                xAxis: {
                    //   name: "nm",
                    data: Data.map((item) => item["date_str"]),
                    maxInterval: 500,
                }, backgroundColor: "#fff",
                tooltip: {
                    trigger: "axis",
                    valueFormatter: (value) => Number(value).toFixed(2),
                    textStyle: {
                        align: "left",
                    },
                },
                legend: {
                    data: ["C2H4浓度"],
                },
                grid: {
                    left: "6%",
                    right: "4%",
                    top: "8%",
                    bottom: "10%",
                },

                dataZoom: [
                    {
                        type: "slider", //inside平移 缩放
                        // throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
                        minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
                        start: 0, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
                        end: 100, //数据窗口范围的结束百分比。范围是：0 ~ 100。
                        zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
                        textStyle: { color: "rgba(0,0,0,0)" },
                    },
                ],
                yAxis: {
                    type: "value",
                    name: "",//ppm
                    axisLabel: {
                        formatter: function (value, index) {
                            return Number(value);
                        }
                    }
                },
                series: [
                    {
                        name: "C2H4浓度",
                        symbol: "none",
                        data: Data.map((item) =>
                            Number(item.value).toFixed(2)
                        ),
                        type: "line",
                        smooth: true,
                    },
                ],
            };

            if (this.myChart == null) {
                this.myChart = this.$echarts.init(this.$refs.chart);
                this.myChart.setOption(option);
                let that = this;
                // 当滑动条变化时触发
                this.myChart.on("datazoom", (params) => {
                    this.Canrefresh = false;

                });
                return;
            }

            this.myChart.setOption(option, true); //true重绘
            // this.myChart = this.$echarts.init(this.$refs.chart);
            // this.myChart.setOption(option);
            // return;
        },

        transTimestamp(datetime, dateSeprator = "/", timeSeprator = ":") {
            if (datetime) {
                const date = new Date(datetime);
                const year = `${date.getUTCFullYear()}`;
                let month = `${date.getUTCMonth() + 1}`;
                let day = `${date.getUTCDate()}`;
                let hour = `${date.getUTCHours()}`;
                let minute = `${date.getUTCMinutes()}`;
                let second = `${date.getUTCSeconds()}`;
                if (month.length === 1) {
                    month = `0${month}`;
                }
                if (day.length === 1) {
                    day = `0${day}`;
                }
                if (day.length === 1) {
                    day = `0${day}`;
                }
                if (hour.length === 1) {
                    hour = `0${hour}`;
                }
                if (minute.length === 1) {
                    minute = `0${minute}`;
                }
                if (second.length === 1) {
                    second = `0${second}`;
                }
                return `${year}${dateSeprator}${month}${dateSeprator}${day} ${hour}${timeSeprator}${minute}${timeSeprator}${second}`;
            }
        },
    },
};
</script>

<style lang="less" scoped>
.history {
    height: 100%;
    width: 100%;
    position: relative;
}

.bt {
    position: absolute;
    z-index: 9;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.chart {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 8;
    background-color: #fff;
}
</style>